<template>
  <div>
    <h2>合同信息</h2>
    <br />
    <el-form ref="form" :model="form">
      <el-row :gutter="20">
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <el-form-item label-width="120px" label="合同编号"
              ><el-input v-model="form.contract_account"></el-input
            ></el-form-item></div
        ></el-col>
        <el-col :span="6"
          ><el-form-item label-width="120px" label="合同文本编号"
            ><el-input v-model="form.contract_text_id"></el-input></el-form-item
        ></el-col>
        <el-col :span="6"
          ><el-form-item label-width="120px" label="合同类型"
            ><el-select v-model="form.contract_type_id" placeholder="请选择"
              ><el-option
                v-for="item in dicMod"
                :value="item.dic_id"
                :key="item.dic_id"
                :label="item.dic_name"
              ></el-option> </el-select></el-form-item
        ></el-col>
        <el-col :span="4"> </el-col>
      </el-row>
      <el-form-item label-width="120px" label="合同名称"
        ><el-input v-model="form.contract_name"></el-input
      ></el-form-item>
      <el-row :gutter="20">
        <el-col :span="16">
          <el-form-item label-width="120px" label="建设单位"
            ><el-input v-model="form.construct_unit"></el-input
          ></el-form-item>
          <div></div
        ></el-col>
        <el-col :span="8">
          <el-form-item label-width="120px" label="甲方类型"
            ><el-select v-model="form.first_party_type_id"
              ><el-option
                v-for="item in first_party_info"
                :value="item.dic_id"
                :key="item.dic_id"
                :label="item.dic_name"
              ></el-option> </el-select></el-form-item
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label-width="120px" label="结构形式："
            ><el-button @click="OpenStructureTree"
              >选择结构样式</el-button
            ></el-form-item
          ></el-col
        >
        <el-col :span="8"
          ><el-form-item label-width="120px" label="建筑分类：">
            <el-button @click="OpenBuildTree"
              >选择建筑分类</el-button
            ></el-form-item
          >
        </el-col>
        <el-col :span="8"
          ><el-form-item label-width="120px" label="建筑面积："
            ><el-input v-model="form.covered_area"></el-input></el-form-item
        ></el-col>
      </el-row>
      <el-row type="flex" justify="space-around">
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <el-form-item label-width="120px" label="工程负责人：">
              <el-input v-model="form.project_leader_id" :disabled="true">
              </el-input
            ></el-form-item></div
        ></el-col>
        <el-col :span="6"
          ><el-form-item label-width="130px" label="工程负责人电话："
            ><el-input
              v-model="form.project_leader_tel"
            ></el-input></el-form-item
        ></el-col>
        <el-col :span="6">
          <el-form-item label-width="120px" label="子公司"
            ><el-select
              v-model="form.subsidiary_corporation"
              placeholder="请选择"
              ><el-option
                v-for="item in subsidiary_company_info"
                :value="item.dic_id"
                :key="item.dic_id"
                :label="item.dic_name"
              ></el-option> </el-select
          ></el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label-width="120px" label="甲方负责人"
            ><el-input v-model="form.first_leader"></el-input></el-form-item
        ></el-col>
        <el-col :span="8"
          ><el-form-item label-width="120px" label="甲方负责人电话"
            ><el-input v-model="form.first_leader_tel"></el-input></el-form-item
        ></el-col>
        <el-col :span="8"
          ><div class="grid-content bg-purple">
            <el-form-item label-width="120px" label="工程地点"
              ><el-input v-model="form.project_site"></el-input
            ></el-form-item></div
        ></el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label-width="120px" label="原始合同额"
            ><el-input v-model="form.original_amount"></el-input></el-form-item
        ></el-col>
        <el-col :span="8"
          ><el-form-item label-width="120px" label="实际合同额"
            ><el-input v-model="form.real_amount"></el-input></el-form-item
        ></el-col>
        <el-col :span="5"
          ><div class="grid-content bg-purple">
            <el-form-item label-width="120px" label="合同签约日期">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.contract_date"
              ></el-date-picker>
            </el-form-item></div
        ></el-col>
      </el-row>

      <el-row :gutter="20" type="flex" justify="space-around">
        <el-col :span="6">
          <el-form-item label-width="120px" label="图纸套数">
            <el-form-item label-width="50px" label="总数" size="mini">
              <el-input type="number" v-model="form.drawing_num"></el-input
            ></el-form-item>
            <el-form-item label-width="50px" label="已出" size="mini">
              <el-input type="number" v-model="form.drawing_num_yet"></el-input
            ></el-form-item>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label-width="120px" label="差旅次数">
            <el-form-item label-width="50px" label="总数" size="mini">
              <el-input type="number" v-model="form.trip_num"></el-input
            ></el-form-item>
            <el-form-item label-width="50px" label="已出" size="mini">
              <el-input
                type="number"
                v-model="form.trip_num_yet"
              ></el-input></el-form-item
          ></el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label-width="120px" label="合同允许状态">
            <el-select v-model="form.contractual_permissible_state"
              ><el-option
                v-for="item in contractual_running_state"
                :value="item.dic_id"
                :key="item.dic_id"
                :label="item.dic_name"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label-width="120px" label="合同备注">
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="form.contract_note"
        >
        </el-input
      ></el-form-item>
    </el-form>

    <el-dialog title="签约信息" :visible.sync="signed_info" width="30%">
      <el-form :model="signed_mod" size="mini">
        <el-form-item label="签约序号：" label-width="120px">
          <el-input v-model="signed_mod.signed_idx"></el-input>
        </el-form-item>
        <el-form-item label="协议名称" label-width="120px">
          <el-input v-model="signed_mod.signed_name"></el-input>
        </el-form-item>

        <el-form-item label="签约建筑面积" label-width="120px">
          <el-input v-model="signed_mod.signed_area"></el-input>
        </el-form-item>

        <el-form-item label="签约额度" label-width="120px">
          <el-input v-model="signed_mod.signed_limit"></el-input>
        </el-form-item>

        <el-form-item label="签约状态" label-width="120px">
          <el-select v-model="signed_mod.signed_status">
            <el-option label="进行中" value="1"></el-option>
            <el-option label="已停止" value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="备注：" label-width="120px">
          <el-input
            type="textarea"
            v-model="signed_mod.signed_notes"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-button @click="signed_info = false">取 消</el-button>
      <el-button type="primary" @click="SingAdd()">确 定</el-button>
    </el-dialog>

    <el-row :gutter="20">
      <el-col :span="16"><h2>合同签约信息</h2></el-col>

      <el-col :span="8"
        ><el-button size="mini" @click="signed_info = true"
          >添加</el-button
        ></el-col
      >
    </el-row>

    <el-table :data="signing_data" border style="width: 100%">
      <el-table-column prop="signed_idx" label="签约序号"></el-table-column>
      <el-table-column prop="signed_name" label="协议名称"></el-table-column>
      <el-table-column
        prop="signed_area"
        label="签约建筑面积"
      ></el-table-column>
      <el-table-column prop="signed_limit" label="签约额度"></el-table-column>
      <el-table-column prop="signed_status" label="签约状态">
        <template slot-scope="scope">
          {{ scope.row.signed_status == 1 ? "进行中" : "已停止" }}
        </template>
      </el-table-column>
      <el-table-column prop="signed_notes" label="备注"></el-table-column>
      <el-table-column label="操作">
        <template>
          <el-button @click="handleClick()" type="text" size="small"
            >查看</el-button
          >
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="结构形式" :visible.sync="dialogVisible" width="30%">
      <el-tree
        :data="Structuredata"
        show-checkbox
        default-expand-all
        node-key="structural_id"
        ref="tree"
        highlight-current
        :props="defaultProps"
      >
      </el-tree>
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="SubmitStrure()">确 定</el-button>
    </el-dialog>

    <el-dialog title="建筑分类" :visible.sync="ShowBuild" width="30%">
      <el-tree
        :data="BuildData"
        show-checkbox
        default-expand-all
        node-key="build_type_id"
        ref="buildtree"
        highlight-current
        :props="BuildProps"
      >
      </el-tree>
      <el-button @click="ShowBuild = false">取 消</el-button>
      <el-button type="primary" @click="SubBuild()">确 定</el-button>
    </el-dialog>

    <el-button @click="Submit()">保存</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      signing_data: [],
      signed_info: false,
      dialogVisible: false,
      ShowBuild: false,
      BuildData: [],
      Structuredata: [],
      defaultProps: {
        children: "structural_children",
        label: "structural_name",
        id: "structural_id",
      },
      signed_mod: {
        signed_idx: "",
        signed_name: "",
        signed_area: 0,
        signed_limit: "",
        signed_status: 0,
        signed_notes: "",
      },

      BuildProps: {
        children: "build_Type_Children",
        label: "build_type_name",
        id: "build_type_id",
      },
      form: {
        contract_name: "",
        construct_unit: "",
        contract_account: "",
        contract_note: "",
        original_amount: "",
        build_type_id: "",
        structural_type_id: "",
        contract_text_id: "",
        real_amount: "",
        trip_num: 0,
        contract_date: null,
        customers_id: 0,
        project_leader_id: 0,
        covered_area: "",
        project_site: "",
        project_leader_tel: "",
        first_leader_tel: "",

        contract_type_id: 0,

        first_leader: "",
        drawing_num: 0,
        trip_num_yet: 0,
        drawing_num_yet: 0,
        first_party_type_id: 0,
        signed_idx: "",
        signed_name: "",
        signed_area: 0,
        signed_limit: "",
        signed_status: 0,
        signed_notes: "",
        subsidiary_corporation: 0,

        contractual_permissible_state: 0,
      },

      dic_type: [
        {
          dic_id: 0,
        },
      ],
      dicMod: [],
      subsidiary_company_info: [],
      first_party_info: [],
      contractual_running_state: [],
    };
  },
  methods: {
    GetContractType() {
      this.$myaxios.get("Contract/GetDictionaryByType_key").then((res) => {
        this.dicMod = res.data;
        this.dicMod.unshift({ dic_id: "0", dic_name: "请选择" });
      });
    },
    OpenBuildTree() {
      this.ShowBuild = true;
      this.$myaxios.get("Contract/GetBuildTree").then((res) => {
        this.BuildData = res.data;
      });
    },
    SubBuild() {
      this.form.build_type_id = this.$refs.buildtree
        .getCheckedKeys()
        .toString();
      this.ShowBuild = false;
    },

    SubmitStrure() {
      this.form.structural_type_id = this.$refs.tree
        .getCheckedKeys()
        .toString();
      this.dialogVisible = false;
    },
    OpenStructureTree() {
      this.dialogVisible = true;
      this.$myaxios.get("Contract/GetStructuralTree").then((res) => {
        this.Structuredata = res.data;
      });
    },
    Submit() {
      (this.form.signed_idx = this.signed_mod.signed_idx),
        (this.form.signed_name = this.signed_mod.signed_name),
        (this.form.signed_area = this.signed_mod.signed_area),
        (this.form.signed_limit = this.signed_mod.signed_limit),
        (this.form.signed_status = this.signed_mod.signed_status),
        (this.form.signed_notes = this.signed_mod.signed_notes);

      // if(this.form.contract_date!==""){
      //   this.form.contract_date= moment(this.form.contract_date).format("YYYY-MM-DD HH:mm:ss")
      // }
      console.log(this.form);
      this.$myaxios.post("Contract/ContractAdd", this.form).then((res) => {
        if (res.data) {
          this.$message.success("保存成功");
          this.$router.push("/i/contract_add");
        }
      });
    },
    GetFirstPartyId() {
      this.$myaxios
        .get("Contract/GetDictionariesKey", {
          params: {
            typeKey: "first_party_type",
          },
        })
        .then((res) => {
          this.first_party_info = res.data;
        });
    },
    GetContractRunningStateId() {
      this.$myaxios
        .get("Contract/GetDictionariesKey", {
          params: {
            typeKey: "contractual_permissible_state",
          },
        })
        .then((res) => {
          this.contractual_running_state = res.data;
        });
    },
    SingModShow() {
      this.signed_info = true;
    },
    SingAdd() {
      this.signing_data.push({
        signed_idx: this.signed_mod.signed_idx,
        signed_name: this.signed_mod.signed_name,
        signed_area: this.signed_mod.signed_area,
        signed_limit: this.signed_mod.signed_limit,
        signed_status: this.signed_mod.signed_status,
        signed_notes: this.signed_mod.signed_notes,
      });

      this.signed_info = false;
    },
    handleClick() {
      console.log("a");
    },

    GetSubsidiaryCompanyId() {
      this.$myaxios
        .get("Contract/GetDictionariesKey", {
          params: {
            typeKey: "subsidiary_company",
          },
        })
        .then((res) => {
          this.subsidiary_company_info = res.data;
        });
    },
  },
  created() {
    this.GetContractType();
    this.GetFirstPartyId();
    this.GetSubsidiaryCompanyId();
    this.GetContractRunningStateId();
  },
};
</script>
<style >
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>


